<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            font-size: 30px;
        }

        div:hover {
            /* height: 400px !important; */
            transform: scaleY(2);
        }

        div span a {}
    </style>
</head>

<body>

    <div style="display:flex;">
        <span>
            <a href="" class="a"></a>
        </span>
    </div>
    <h1>111</h1>

    <script>

        // 重绘和回流

        //   重绘：样式的变化，但不影响结构      color / background-color
        //   回流：样式的改变，影响了结构     display:none   width / height   font-size

        // 重绘和回流是无法避免的
        // 回流的代价高于重绘
        // 回流必定引发重绘，但是重绘不一定引发回流



        // 需要操作样式的时候，尽量一次完成   cssText
        //    cssText 是字符串   =  覆盖原来的行内样式    += 尽量拼接

        // 获取样式
        //   行内    直接获取
        //   非行内   getComputedStyle(ele)[attr]
        //     兼容   IE8及以下  ele.currentStyle(attr) 
        //       封装函数  getCss()





        var oDiv = document.querySelector('div');
        // 一个一个的添加样式  
        // oDiv.style.width = '200px';
        // oDiv.style.height = '200px';
        // oDiv.style.backgroundColor = 'red';
        // 设置样式，尽量做一次性操作
        oDiv.style.cssText += 'width:200px;height:200px;background-color:red;';



        // 获取样式
        console.log(oDiv.style.width);   // 行内样式

        console.log(oDiv.style.fontSize);   // 非行内样式就获取不到

        // window对象的方法
        // var v = getComputedStyle(oDiv).height;


        // IE8及以下
        // var v = oDiv.currentStyle('height');
        // console.log(v);


        var v = getCss(oDiv, 'height');
        console.log(v);


        // ele 元素    attr 属性
        function getCss(ele, attr) {
            if (window.getComputedStyle) {
                return getComputedStyle(ele)[attr];
            }
            return ele.currentStyle(attr);
        }




    </script>

</body>

</html>